// import 'preact/devtools';
// import 'preact/debug';
import { render, h, Fragment } from 'preact';

import { setupModel } from './model';
import Graph from './vm/Graph';
import { setShape } from './shapes';

export class LogicFlow {
  constructor({ domRef, graphData }) {
    this.domRef = domRef;
    this.graphData = graphData;
  }

  render(domRef, graphData) {
    const model = setupModel(graphData || this.graphData);

    render((
      <>
        <Graph graphModel={model.graphModel} />
      </>
    ), domRef || this.domRef);
  }
  registerNode(type, shape) {
    setShape(type, shape)
  }
}

export default LogicFlow;

const lf = new LogicFlow({
  domRef: document.getElementById('container')
});

lf.registerNode('diamond', {
  component: function Diamond (props) {
    const { x = 0, y = 0, r = 30 } = props;
    const points = [
      [x + r, y].join(','),
      [x, y + r].join(','),
      [x - r, y].join(','),
      [x, y - r].join(','),
      [x + r, y].join(','),
    ].join(' ')
    const attrs = {
      // default
      x: 0,
      y: 0,
      r: 30,
      points,
      fill: 'red',
      fillOpacity: 1,
      strokeWidth: '1px',
      stroke: '#000',
      strokeOpacity: 1,
      ...props
    };
    return <polyline {...attrs} />
  },
  getAnchors (props) {
    const { x, y, r } = props;
    return [
      { x: x + r, y: y },
      { x, y: y + r  },
      { x: x- r, y },
      { x, y: y - r }
    ]
  },
  model () {
    return {
      type: 'diamond',
      x: 40,
      y: 50,
      r: 30,
    }
  }
})

lf.render(null, {
  // 渲染3个RectNode出来，方便调试；测试性能的话，可以把3改成一个大数字，比如100、1000；
  nodes: [
    {
      type: 'rect'
    },
    {
      type: 'rect'
    },
    {
      type: 'circle'
    },
    {
      type: 'diamond'
    }
  ],
});
